<!DOCTYPE html>
<html>
<head>
#include("../../_common/head.html")
<title>在线列表</title>
</head>
<body class="pear-container">
    <div class="layui-panel query-panel /*查询面板*/">
        <form id="main-form" class="layui-form layui-row layui-col-space16" lay-filter="main-form" onsubmit="return false;">
            <div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="pear-icon pear-icon-text"></i>
                    </div>
                    <input type="text" name="word" value="#(word??)" placeholder="模糊查询" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input id="startTime" type="text" name="startDate" value="#(startDate??)" placeholder="开始日期" autocomplete="off" class="layui-input select-time" data-type="datetime" value="#(startDate??)">
                </div>
            </div>
            <div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input id="endTime" type="text" name="endDate" value="#(endDate??)" placeholder="结束日期" autocomplete="off" class="layui-input select-time"  data-type="datetime" value="#(endDate??)">
                </div>
            </div>
        	<div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
				<div class="layui-input-wrap">
                    <select name="status">
                        <option value="">-- 在线状态 --</option>
                        #DICTS(type="user_online_status")
                        #for(item : dicts)
                        <option value="#(item.value)"#if(status?? == item.value) selected#end>#(item.label)</option>
                        #end
                    </select>
                </div>
            </div>
            <div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
                <div class="layui-btn-group">
                    <button id="main-form-search" type="button" class="layui-btn layui-btn-sm">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button id="main-form-reset" type="button" class="layui-btn layui-btn-sm layui-btn-primary">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-panel data-panel /*数据面板*/">
        <table id="main-table"></table>
        <script id="main-pagebar" type="text/html">
        </script>
    </div>


#include("../../_common/data_table_template.html")
#include("../../_common/foot.html")

<script type="text/javascript">
layui.use(['jquery'], () => {
    var $ = layui.jquery;

    //定义表格模块基本参数
    let module = {
        // type: TABLE_TYPE.dataTable,             //表格类型：二维表格
        // idField: 'id',                          //表格中 id 的字段名（与数据库定义的要一致，如userId）
        name: '在线用户',                        //表格模块的业务名称
        path: '#CTX()/admin/monitor/online/',   //表格模块的操作路径，以 '/' 结尾
    };

    //定义查询表单基本参数
    let queryForm = {
        // id: 'main-form',                        //查询面板中 form 表单的 id 属性
        // searchButtonId: 'main-form-search',     //查询面板中搜索按钮的 id 属性
        // resetButtonId: 'main-form-reset',       //查询面板中重置按钮的 id 属性
    };

    //定义编辑对话框基本参数
    let editDialog = {
        // submitFormId: 'edit-form',              //编辑页面（模态）中 form 表单的 ID 属性
        // submitButtonId: 'submit-button',        //编辑页面（模态）中提交按钮的 ID 属性
        width: '720px',                         //对话框宽度
        height: '95%',                          //对话框高度
    };

    //定义表格操作基本参数
    let actions = {
        //#authPermissions('monitor:online:query')
        detailFlag: true,                                   //记录详情权限标志
        // detailUrl: module.path + 'detail',                  //记录详情 URL
        //#end
        //事件处理
        handleEvent: (options, event, obj) => {
            if (event === 'forceLogout') {
                if (obj.data['status'] != 'ON') {
                    $.modal.msgWarning('用户已经离线');
                    return;
                }

                $.modal.confirm('确定要强退选择的记录？', () => {
                    let url = module.path + 'forceLogout';
                    $.operate.save(url, {'tokens': obj.data[module.idField]}, 'delete', () => {
                        $.table.refresh('main-table');
                    });
                });
            }
        },
    };

    let rowButtons = '';
    //#authPermissions('monitor:online:forceLogout')
    rowButtons = '<button class="layui-btn layui-btn-xs layui-bg-red" plain lay-event="forceLogout"><i class="layui-icon layui-icon-close"></i>&nbsp;强退</button>';
    //#end

    //定义数据表格的 options，参考：https://layui.dev/docs/2/table/#options
    let options = {
        id: 'main-table',                                       //设定实例唯一索引
        elem: '#main-table',                                    //绑定原始 table 元素
        title: module.name,                                     //定义 table 的大标题（在文件导出等地方会用到）
        url: module.path + 'query',                             //发送异步请求的 URL
        initSort: {"field": "startDatetime", "type": "desc"},   //初始排序状态
        toolbar: $.table.buildTableToolbar(actions),            //开启表格头部工具栏
        pagebar: '#main-pagebar',                               //开启分页区域的自定义模板
        cols: [[                                                //表头属性集
            {type: 'checkbox', align: 'center', width: 60},
            {field: 'id', align: 'left', minWidth: 280, width: '18%', sort: true, title: 'TOKEN'},
            {field: 'nickname', align: 'left', minWidth: 130, width: '10%', sort: true, title: '昵称'},
            {field: 'ip', align: 'left', width: 160, sort: true, title: 'IP地址'},
            {field: 'location', align: 'left', minWidth: 130, width: '10%', sort: true, title: '登录位置'},
            {field: 'browser', align: 'left', minWidth: 150, width: '15%', sort: true, title: '浏览器类型'},
            {field: 'os', align: 'left', minWidth: 130, width: '13%', sort: true, title: '操作系统'},
            {field: 'status', align: 'center', width: 110, sort: true, title: '在线状态', templet: '#bean-userOnlineStatus'},
            {field: 'startDatetime', align: 'center', width: 160, sort: true, title: '创建时间', templet: '#bean-startDatetime'},
            {field: 'activityDatetime', align: 'center', width: 160, sort: true, title: '最后访问时间', templet: '#bean-activityDatetime'},
            {align: 'left', minWidth: 240, templet: $.table.buildRowToolbar(actions, rowButtons)},
        ]],
        module: module,             //表格模块基本参数
        queryForm: queryForm,       //查询表单基本参数
        editDialog: editDialog,     //编辑对话框基本参数
        actions: actions,           //表格操作基本参数
    };

    $(document).ready(() => {
        /**
         * 初始化数据表格
         */
        options = $.table.init(options);
    });

});
</script>

</body>
</html>
